<script setup lang="ts">
import { ref, watch } from 'vue'
import login_user from './c-nps/login_user.vue'
import login_phone from './c-nps/login_phone.vue'
import { localCache } from '@/utils/storage'
const isChecked = ref<boolean>(localCache.getCache('rmPassword') ?? false)
const accountState = ref<string>('user')
const loginUesrEl = ref<InstanceType<typeof login_user>>()

const verifyformFn = () => {
  loginUesrEl.value?.submitForm()
}

watch(isChecked, (newvalue) => {
  localCache.setCache('rmPassword', newvalue)
  if (!localCache.getCache('rmPassword')) {
    if (localCache.getCache('user')) localCache.removeCache('user')
    if (localCache.getCache('password')) localCache.removeCache('password')
  }
})
// loginUesrEl
</script>

<template>
  <div class="login">
    <div class="login_box">
      <h1 class="title">后台管理系统通用模板</h1>
      <div class="account">
        <el-tabs stretch v-model="accountState">
          <!-- 账号密码 -->
          <login_user ref="loginUesrEl" />
          <!-- 手机号密码 -->
          <login_phone />
        </el-tabs>
      </div>
      <div class="link">
        <el-checkbox v-model="isChecked" label="记住密码" size="large" />
        <el-link type="primary">忘记密码</el-link>
      </div>
      <div class="btn">
        <el-button type="primary" size="large" @click="verifyformFn"
          >登录</el-button
        >
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  .login_box {
    padding: 20px;
    box-sizing: border-box;
    width: 400px;
    background-color: rgb(223, 224, 224);
    .title {
      margin-bottom: 10px;
      font-size: 22px;
      font-weight: bold;
      text-align: center;
    }
    .account {
      .icon {
        margin-right: 5px;
      }
    }
    .link {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .btn {
      display: flex;
      justify-content: center;
      .el-button {
        width: 100px;
      }
    }
  }
}
</style>
